<template>
  <div class="custom-card">
    <a-card :bordered="false">
      <div slot="title">
        <span>报名提交信息</span>
        <a-tag :color="registrationStatusObj.color" class="_ml-16">
          {{ registrationStatusObj.dictLabel }}
        </a-tag>
      </div>
      <div class="registration-info">
        <a-descriptions title="报名提交信息" :column="1">
          <a-descriptions-item label="报名提交人">
            <template v-if="registrationInfo.gmatName">
              {{ registrationInfo.gmatName }}
              {{ registrationInfo.gmatPhone }}
            </template>
          </a-descriptions-item>
          <a-descriptions-item label="报名状态">
            <span :style="{ color: isCancel ? 'red' : '' }">
              {{ registrationStatusObj.dictLabel }}
              <template v-if="isCancel"> （{{ registrationInfo.cancelTime }}） </template>
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="报名来源">
            {{ RegisterTypeEnum[registrationInfo.registerType] }}
          </a-descriptions-item>
          <a-descriptions-item label="报名申请时间">
            {{ registrationInfo.submitTime }}
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions title="报名审核信息" :column="1">
          <a-descriptions-item label="审核人">
            {{ registrationInfo.verifyName }}
          </a-descriptions-item>
          <a-descriptions-item label="审核时间">
            {{ registrationInfo.verifyTime }}
          </a-descriptions-item>
          <a-descriptions-item
            v-if="registrationInfo.approvalStatus == RosterApprovalStatusEnum.REJECTED"
            label="审核说明"
          >
            {{ registrationInfo.remarks }}
          </a-descriptions-item>
          <a-descriptions-item
            v-if="registrationInfo.approvalStatus == RosterApprovalStatusEnum.WAITING_FOR_APPROVAL && !disabled"
            label=""
          >
            <a-button type="primary" @click="handleAudit()">
              立即审核
            </a-button>
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions title="其它信息" :column="1">
          <a-descriptions-item label="邀约人">
            {{ registrationInfo.inviteUserName }} {{ registrationInfo.inviteUserPhone }}
          </a-descriptions-item>
          <a-descriptions-item label="取消人">
            {{ registrationInfo.cancelPersonName }}
          </a-descriptions-item>
          <a-descriptions-item v-if="registrationInfo.isCancelRecord" label="取消记录">
            <a-button type="primary" ghost @click="() => $refs.cancelRecordRef.openModal(registrationInfo.registerId)">
              取消报名记录
            </a-button>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-card>
    <CancelRecord ref="cancelRecordRef" />
    <UserCustomFormModal
      v-if="activityId"
      ref="userCustomFormModal"
      :activityId="activityId"
      @success="handleSuccess"
    />
  </div>
</template>

<script>
import { RosterApprovalStatusEnum, RegisterTypeEnum } from '@/enums/activity.js'
import UserCustomFormModal from '@/views/activity/components/customFormModal/index.vue'
import CancelRecord from './CancelRecord.vue'
// 报名信息
export default {
  components: {
    UserCustomFormModal,
    CancelRecord
  },
  props: {
    registrationInfo: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    isCancel() {
      return (
        this.registrationInfo.approvalStatus == RosterApprovalStatusEnum.CANCELLED ||
        this.registrationInfo.approvalStatus == RosterApprovalStatusEnum.CANCELLED_WAITING
      )
    },
    disabled() {
      return this.registrationInfo.activityType === 'other_join' // 协办方
    },
    registrationStatusObj() {
      return (
        this.Dict.getLocal('rosterApprovalStatusDict').find(
          item => item.dictValue == this.registrationInfo.approvalStatus
        ) || {}
      )
    }
  },
  data() {
    return {
      activityId: undefined,
      RosterApprovalStatusEnum,
      RegisterTypeEnum
    }
  },
  mounted() {
    this.activityId = this.$route.query.activityId
  },
  methods: {
    handleAudit() {
      this.$refs.userCustomFormModal.openModal(
        {
          activityId: this.$route.query.activityId,
          id: this.registrationInfo.registerId,
          signStatus: this.registrationInfo.signStatus,
          signType: this.registrationInfo.signType,
          activityTicketId: this.registrationInfo.activityTicketId,
          replaceSignCompanyName: this.registrationInfo.replaceSignCompanyName,
          replaceSignCompanyPosition: this.registrationInfo.replaceSignCompanyPosition,
          replaceSignPersonName: this.registrationInfo.replaceSignPersonName,
          replaceSignPersonPhone: this.registrationInfo.replaceSignPersonPhone
        },
        'audit'
      )
    },
    handleSuccess() {
      this.$emit('success')
    }
  }
}
</script>
<style lang="less" scoped>
.registration-info {
  background: #f7f8fa;
  padding: 20px;
  display: flex;
  .ant-descriptions-item > span {
    display: block;
  }
  .ant-descriptions-item-label {
    white-space: nowrap;
  }
}
</style>
